<template>
  <div>
    <div v-if="goodsShow">
        <van-card
          v-for="item in goodsList" :key="item.proid"
          :price="item.originprice"
          :title="item.proname"
          :thumb="item.img1"
          @click="goDetail('/home/goodsinfo',item.proid)"
        />
    </div>
    <ul class="pagination_ul" v-else>
      <li class="pagination_li1" v-for="item in goodsList" :key="item.proid" @click="goDetail('/home/goodsinfo',item.proid)">
        <div class="goods_img"><img :src="item.img1" alt=""></div>
        <div class="goods_txt">
          <div class="goods_title">{{item.proname}}</div>
          <p class="goods_price">${{item.originprice}}</p>
        </div>
      </li>
    </ul>
    <!-- 分页按钮 -->
    <div class="pagination_button" @click="iconButton">
      <van-icon v-if="iconShow" name="apps-o" />
      <van-icon v-else name="bars" />
    </div>
  </div>
</template>
<script>
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  props: {
    goodsList: {
      type: Array,
      require: true // 必须传
    }
  },
  data() {
    return {
      goodsShow: true,
      iconShow: true
    }
  },
  methods: {
    // 分页切换按钮
    iconButton() {
      this.iconShow = !this.iconShow
      this.goodsShow = !this.goodsShow
    }
  }
}
</script>
<style lang="scss">
  .pagination_ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .pagination_li1{
      background: white;
      border: 1px solid #ccc;
      width: 48%;
      margin-bottom: 6px;
      .goods_img{
        img{
          width: 170px;
          height:160px ;
        }
      }
      .goods_txt{
        padding: 0px 10px;
      }
      .goods_title{
        font-size: 14px;
        height: 39px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .goods_price{
        font-size: 12px;
        color: red;
      }
    }
  }
  .pagination_button{
    background: white;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    font-size: 20px;
    width: 30px;
    height: 30px;
    position: fixed;
    right: 15px;
    bottom: 10%;
  }
  .top_button{
    bottom: 15%;
  }
</style>